@extends('layouts.back_stage')
@section('content')
    <style>
        .addCode{float:right;margin-right:30px;}

        .shopBg{background:#fff;overflow: hidden;margin:20px 0 10px 0;}
        .tableBg{padding:30px;background:#fff;}

        .input-item{width:200px;padding-right: 0;margin:20px 10px 20px 0;}
        .timeDuan{margin:20px 0;}
        .input-time{width:220px;margin-right:10px;}
        .pagination-box{text-align: center;box-sizing:border-box;margin-top:20px;}
        .el-range-editor--small.el-input__inner{width:300px;}
        .el-date-editor .el-range-separator{padding:0 15px}
        .el-textarea{width:400px;}
        /*汇总*/
        .huiRow{float:left;width:50%;height:70px;line-height:70px;text-align:center;border-right:1px solid #6C6A6C;}
        .huiRow label,.huiRow .laDiv{height:35px;line-height:35px;float:left;width: 100%;font-size:16px;}
        [v-cloak] {display: none;}
        ::-webkit-scrollbar {height: 8px;}
    </style>

    <div class="container">
        <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">条码入仓</h3></div>
        <!-- 主体-->
        <div class="page-body">
            <div class="row app" id="shopInfos" v-cloak>
                <el-button class="addCode" type="primary" size="small" @click="addTiao">添加入仓单</el-button>
                <div class="col-md-12 row row-table-box">
                    <div class="shopBg">
                        <div class="row" style="margin-top:10px;padding:6px 30px;min-height:90px;background:#fff;">
                            <label>条码：</label>
                            <el-input v-model.trim="small_qr" class="input-item" placeholder="请输入条码" size="small" prefix-icon="el-icon-search" clearable></el-input>
                            <label>创建时间：</label>
                            <el-date-picker v-model="getDatas" @change="getTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small"></el-date-picker>
                            <el-button type="primary" size="small" @click="grabble('reset')">搜索</el-button>
                            <el-button type="primary" size="small" @click="resetSou('reset')">重置</el-button>
                        </div>
                    </div>
                    <div class="shopBg" style="margin-top:10px;padding:15px 30px;height:100px;background:#fff;">
                        <div class="huiRow">
                            <label>入仓总单数</label>
                            <div class="laDiv">@{{ countNum }}</div>
                        </div>
                        <div class="huiRow" style="border-right:none;">
                            <label>入仓总数量/件</label>
                            <div class="laDiv">@{{ scan_nums }}</div>
                        </div>
                    </div>
                    <div class="tableBg" style="margin-top:10px;">
                        <el-table :data="tableInfo" size="mini" border @filter-change="filterChange" @sort-change="sortChange">
                            <el-table-column prop="loop" label="序号" width="50" :resizable='false'></el-table-column>
                            <el-table-column prop="order_num" label="入仓单号" width="120" :resizable='false'></el-table-column>
                            <el-table-column prop="type" label="入仓仓库" width="100" :resizable='false' column-key="type" :filters="options2"></el-table-column>
                            <el-table-column prop="scan_num" label="入仓数量/件" width="100" :resizable='false'></el-table-column>
                            <el-table-column prop="status" label="入仓状态" width="100" :resizable='false' column-key="status" :filters="[{ text: '入仓中', value: '1' }, { text: '入仓完成', value: '2' }]">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.status===1" style="color: #1aad1a;">入仓中</span>
                                    <span v-if="scope.row.status===2" style="color: #ccc;">入仓完成</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="company_name" label="所属公司" min-width="170" :resizable='false'></el-table-column>
                            <el-table-column prop="founder" label="创建人" width="80" :resizable='false'></el-table-column>
                            <el-table-column prop="created_at" label="创建时间" width="160" sortable="custom" :resizable='false'></el-table-column>
                            <el-table-column prop="remark" label="备注" min-width="380" :resizable='false'></el-table-column>
                            <el-table-column label="操作" width="120" fixed="right" :resizable='false'>
                                <template slot-scope="scope">
                                    <div v-if="scope.row.status===1">
                                        <el-button type="text" size="small" @click="sendCode(scope)">扫码入仓</el-button>
                                        <el-button type="text" size="small" @click="delCode(scope)">删除</el-button>
                                    </div>
                                    <div v-else-if="scope.row.status===2">
                                        <el-button type="text" size="small" @click="lookCode(scope)">查看</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination-box">
                            <el-pagination @current-change="changePageSkip" :current-page="currentPage" :total="total" layout="prev, pager, next" background></el-pagination>
                        </div>
                    </div>
                </div>
                <el-dialog title="添加入仓信息" :visible.sync="showBox" class="add-box" width="30%">
                    <el-form :model="addAct">
                        <el-form-item label="入仓仓库" label-width="100px">
                            <el-select v-model="addAct.type_id" filterable placeholder="请选择入仓仓库(必)" size="small" class="panType" style="width:95%">
                                <el-option v-for="item in options2" :key="item.value" :label="item.text" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="showBox = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="sureBtn" size="small" :disabled="lock">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
        <!-- /主体-->
    </div>
    <script>
        new Vue({
            el: '#shopInfos',
            data:{
                type_id:'',//仓库
                options2: [], //仓库
                small_qr:'',//条码
                getDatas:'', //起止时间
                created_at:'', //起止时间存储变量
                status:'',//状态
                go_time:'', //时间排序

                //汇总
                countNum:'',//入仓总单数
                scan_nums:'',//入仓总数量

                tableInfo:[], //表单数据
                total:1,  //table总条数
                currentPage:1, //table当前页数
                showBox:false,//添加弹框显示隐藏


                addAct:{
                    type_id:'',//添加仓库
                },
                lock:false,//确定锁

                delCodeFlag:true,
            },
            mounted(){
                this.getEntrepot();
                this.grabble();
            },
            methods:{
                /*添加获取公司仓库信息*/
                getEntrepot(){
                    var that = this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/company-factory',
                        data: {},
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
                                var opt2=[];
                                for(var value of data.content.type){ //仓库
                                    opt2.push({'value':value.id,'text':value.type})
                                }
                                that.options2 = opt2;
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                //获取数据
                grabble(type){
                    var that = this;
                    let skip;
                    if(type == 'reset'){
                        skip = 0;
                    }else{
                        skip = that.currentPage-1;
                    }
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/factory-stock-list',
                        data: {
                            skip:skip,
                            type_id:this.type_id,
                            code:this.small_qr,
                            status:this.status,
                            go_time:this.go_time,
                            created_at:that.created_at,
                        },
                        success: function (data) {
                            if(data.result.success){
                                var opt=[];
                                let i = 0;
                                for(var value of data.content.data){
                                    i++;
                                    opt.push({
                                        'id':value.id,
                                        'loop':i+(10*skip),
                                        'order_num':value.order_num,
                                        'type':value.type,
                                        'scan_num':value.scan_num,
                                        'status':value.status,
                                        'company_name':value.company_name,
                                        'founder':value.founder,
                                        'created_at':value.created_at,
                                        'remark':value.remark
                                    })
                                }
                                that.countNum=data.content.total;
                                that.scan_nums=data.content.scan_nums;

                                that.tableInfo = opt;
                                that.total = data.content.total;
                                that.currentPage = data.content.skip;
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                /*重置*/
                resetSou(){
                    this.type_id='';
                    this.small_qr='';
                    this.getDatas='';
                    this.created_at='';
                    this.grabble();
                },
                getTime(date){
                    if(date==null){
                        this.getDatas='';
                        this.created_at ='';
                    }else{
                        this.getDatas=date;
                        this.created_at =date[0]+' - '+date[1];
                    }
                },
                /*发货时间排序*/
                sortChange(item){
                    if(item.prop == "created_at"){
                        if(item.order == "ascending"){
                            this.go_time = 1
                        }else if(item.order == "descending"){
                            this.go_time = 0
                        }else{
                            this.go_time = ''
                        }
                    }else{
                        this.go_time = ''
                    }
                    this.grabble('reset')
                },
                changePageSkip(val){
                    //console.log(val);
                    this.currentPage = val;
                    this.grabble();
                },
                filterChange(filters){
                    if(filters.type!=undefined){
                        var istyArr=filters.type;
                        var stas1='';
                        for(let xf=0;xf<istyArr.length; xf++){
                            stas1=stas1+istyArr[xf]+',';
                        }
                        this.type_id=stas1.substr(0, stas1.length - 1);
                        this.grabble('reset');
                    }
                    if(filters.status!=undefined){
                        var fil=filters.status;
                        var stas='';
                        for(var d=0;d<fil.length; d++){
                            stas=stas+fil[d]+',';
                        }
                        this.status=stas.substr(0, stas.length - 1);
                        this.grabble('reset');
                    }
                },
                /*点击添加按钮*/
                addTiao(){
                    this.showBox = true;
                    this.addAct.type_id='';
                },
                /*点击添加入库单确定*/
                sureBtn(){
                    var that = this;
                    var type_id = this.addAct.type_id;
                    if(type_id==''){
                        this.$notify.error({
                            title: '提示',
                            message: '请选择入仓仓库',
                        });
                        return false;
                    }
                    this.lock=true;
                    $.ajax({
                        url: '/distribution/create-stock',
                        type: 'post',
                        data: {
                            type_id:type_id,
                        },
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        dataType: 'json',
                        success:function(res){
                            if(res.result.success){
                                that.$notify.success({
                                    title: '提示',
                                    message: '添加成功',
                                });
                                that.grabble();
                                that.showBox = false;
                                that.addAct.type_id='';
                                that.lock=false;
                            }else{
                                that.lock=false;
                                that.$notify.error({
                                    title: '错误',
                                    message: res.result.errorMsg
                                });
                            }
                        }
                    })
                },
                /*扫码入仓*/
                sendCode(scope){
                    window.location.href='/distribution/scan-stock/'+scope.row.id;
                },
                /*删除*/
                delCode(scope){
                    var that=this;
                    const h = this.$createElement;
                    this.$msgbox({
                        title: '提示',
                        message: h('p', null, [
                            h('span', null, '是否删除此入仓单('),
                            h('span', { style: 'color: red' }, '删除后，该单中条码重置'),
                            h('span', { style: 'color: #606266' }, ')?')
                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                if(that.delCodeFlag==true){
                                    that.delCodeFlag=false;
                                    $.ajax({
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                        },
                                        type: 'post',
                                        url: '/distribution/stock-del',
                                        data: {
                                            id:scope.row.id
                                        },
                                        success: function (data) {
                                            //console.log(data);
                                            if(data.result.success){
                                                that.$notify.success({
                                                    title: '提示',
                                                    message: data.content
                                                });
                                                done();
                                                that.grabble('reset');
                                                that.delCodeFlag=true;
                                            }else{
                                                that.$notify.error({
                                                    title: '错误',
                                                    message: data.result.errorMsg
                                                });
                                                that.delCodeFlag=true;
                                            }
                                        }
                                    })
                                }
                            } else {
                                done();
                            }
                        }
                    }).then(action => {

                    });
                },
                /*查看*/
                lookCode(scope){
                    window.location.href='/distribution/scan-stock/'+scope.row.id;
                },
            }
        });
    </script>
@endsection
